<template>
  <div class="box">
      <div class="box-top">
          <div class="top-text">
              <p class="text-jia">
                  <span class="jia-sp">￥{{qian.goodsLowPrice}}</span><del class="jia-de">￥{{qian.goodsHighPrice}}</del>
              </p>
              <p class="text-wen">
                  {{qian.goodsName}}￥{{qian.goodsLowPrice}}+{{wen}}￥0+{{tang}}￥0
              </p>
          </div>
          <div class="top-jishu">
              <span class="iconfont icon-jian3" @click="jian"></span>
              <span class="jishu-txt">{{shu}}</span>
              <span class="iconfont icon-jia" @click="jia"></span>
          </div>
      </div>
      <div class="box-bottom">
          <div class="circle cle-dv1">充4赠3
              <span class="dve-sp">全场饮品</span>
          </div>
          <div class="circle cle-dv2">立即购买</div>
          <div class="circle cle-dv3" @click="shopping">加入购物车</div>
      </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
    name:"Joined",
    data(){
        return {
            qian:{},
            shu:1,
            wen:'冰',
            tang:'不另外加糖'
        }
    },
    created(){
        this.bus.$on('eclick',data=>{
            this.wen = data
            console.log('data',data);
        });
        this.bus.$on('tclick',data=>{
            this.tang = data
        })
    },
    methods:{
        jian(){
            if (this.shu<=1) {
                this.shu = 1;
                return
            }
            this.shu--
        },
        jia(){
            this.shu++
        },
        shopping(){
            this.$router.back()
            this.$store.state.tian = 1
            axios({
                url:'/api/cart/addCart',
                method:"POST",
                data:{
                    gid: this.$route.params.xiaoid,
                    // id: 1,
                    number: this.shu,
                    price: this.qian.goodsLowPrice,
                    total: this.qian.goodsHighPrice,
                    uid: 3
                }
            })
        }
    },
    mounted(){
        axios({
            url:"/api//goods/findGoodsByGid",
            params:{
                id:this.$route.params.xiaoid
            }
        })
        .then(res=>{
            this.qian = res.data.data
        })
    }
}
</script>

<style scoped>
.box{
    width: 3.6rem;
    height: 1.06rem;
    background-color: #fff;
    position: fixed;
    bottom: 0;
}
.box .box-top{
    width: 100%;
    height: 0.5rem;
}
.box-top .top-text{
    width: 1.5rem;
    height: 0.3rem;
    float: left;
    margin: 0.17rem 0 0 0.2rem;
}
.text-jia .jia-sp{
    font-size: 0.14rem;
    color: #ec2e00;
}
.text-jia .jia-de{
    font-size: 0.1rem;
    color: #858585;
    text-decoration: line-through;
}
.top-text .text-wen{
    font-size: 0.09rem;
}
.box-top .top-jishu{
    float: right;
    width: 0.76rem;
    height: 0.22rem;
    margin: 0.18rem 0.22rem 0 0;
    display: flex;
    justify-content: space-between;
}
.top-jishu .iconfont{
    font-size: 0.2rem;
    color: #151c8a;
}
.top-jishu .jishu-txt{
    line-height: 0.22rem;
    font-size: 0.12rem;
}
.box .box-bottom{
    width: 100%;
    height: 0.56rem;
    display: flex;
    justify-content: space-evenly;
    align-items: center
}
.box-bottom .circle{
    width: 0.94rem;
    height: 0.34rem;
    border-radius: 0.17rem;
    border: 1px solid #6d85c4;
    text-align: center;
    line-height: 0.34rem;
    font-size: 0.12rem;
}
.box-bottom .cle-dv1{
    border-color: #ee4104;
    color: #ee4104;
    position: relative;
}
.cle-dv1 .dve-sp{
    position: absolute;
    display: blocj;
    width: 0.56rem;
    height: 0.18rem;
    font-size: 0.1rem;
    background-color: #f05821;
    color: #fff;
    text-align: center;
    line-height: 0.18rem;
    border-radius: 0.02rem;
    top: -0.1rem;
    left: -0.04rem;
}
.box-bottom .cle-dv2{
    color: #657fc1;
}
.box-bottom .cle-dv3{
    color: #fff;
    background-color: #6d86c4;
}
</style>